<template>
<highlightjs language="JavaScript" highlightAuto top :code="code" />
</template>
<script>
export default {
  setup () {
    const code = `
    const state = reactive({
      map: ref(null),
      mapBox: ref(null),
      India: [68.17665, 7.96553, 97.40256, 35.49401],
      Argentina: [-73.41544, -55.25, -53.62835, -21.83231],
      Nigeria: [2.6917, 4.24059, 14.57718, 13.86592],
      Sweden: [11.02737, 15.36174, 53.90338, 89.10625],
      overlay: new Tile({ // 默认显示印度
        extent: [68.17665, 7.96553, 97.40256, 35.49401],
        source: new TileJSON({
          url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json?secure=1',
          crossOrigin: 'anonymous'
        })
      })
    })

    const init = () => {
      state.map = new Map({
        target: state.mapBox,
        layers: [
          new Tile({
            source: new OSM() // 图层数据源
          }),
          state.overlay // 显示指定范围的图层
        ],
        view: new View({
          // 地图视图
          projection: 'EPSG:4326', // 坐标系，有EPSG:4326和EPSG:3857
          center: [0, 0], // 北京坐标
          zoom: 1 // 地图缩放级别（打开页面时默认级别）
        })
      })
    }

    const replaceTheRegion = (data) => {
      state.overlay.setExtent(state[data])
    }
    `
    return {
      code
    }
  }
}
</script>
